<template>
  <div>
    <el-drawer
      v-model="innerDrawer"
      title="列表设置"
      :append-to-body="true"
      size="40%"
      :before-close="handleClose"
    >
      <el-tree
        highlight-current
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        :data="columnsSelf"
        draggable
        default-expand-all
        node-key="prop"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
      >
        <template #default="{ node, data }">
          <!-- <span class="custom-tree-node">
          <span>{{ node.label }}</span>
            <el-select
              v-model="item.fixed"
              placeholder="固定位置"
              size="mini"
              clearable
              style="width: 140px"
            >
              <el-option label="不固定" value="" />
              <el-option label="固定到列头" value="left" />
              <el-option label="固定到列尾" value="right" />
            </el-select>
        </span> -->

          <div
            class="aic jcb columnItem"
            :style="{
              cursor: data.fixed ? 'not-allowed' : 'move',
            }"
          >
            <div class="aic">
              <div class="el-icon-rank"></div>
              <el-button style="margin: 0 10px" type="text">{{
                node.label
              }}</el-button>
              <!-- 下拉框 -->
            </div>
            <div class="aic">
              <el-select
                v-model="data.fixed"
                placeholder="固定位置"
                size="mini"
                clearable
                style="width: 140px"
              >
                <el-option label="不固定" value="" />
                <el-option label="固定到列头" value="left" />
                <el-option label="固定到列尾" value="right" />
              </el-select>
              <div class="ml10">
                <el-switch size="mini" v-model="data.visible"> </el-switch>
              </div>
            </div>
          </div>
        </template>
      </el-tree>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="innerDrawer = false">取消</el-button>
          <el-button type="primary" @click="handleSave"> 保存 </el-button>
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted, computed } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import type { DragEvents } from "element-plus/es/components/tree/src/model/useDragNode";
import type {
  AllowDropType,
  NodeDropType,
} from "element-plus/es/components/tree/src/tree.type";
import { ElMessageBox } from "element-plus";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const emits = defineEmits(["handelColumns"]);
const state = reactive({});

const props = defineProps({
  columns: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const columnsSelf = computed(() => JSON.parse(JSON.stringify(props.columns)));
const drawer = ref(false);
const innerDrawer = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确认不保存设置?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const handleSave = () => {
  innerDrawer.value = false;
  emits("handelColumns", columnsSelf.value);
};

const open = () => {
  innerDrawer.value = true;
};

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log("drag start", node);
};
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents,
) => {
  console.log("tree drag enter:", dropNode.label);
};
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents,
) => {
  console.log("tree drag leave:", dropNode.label);
};
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log("tree drag over:", dropNode.label);
};
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents,
) => {
  console.log("tree drag end:", dropNode && dropNode.label, dropType);
};
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents,
) => {
  console.log("tree drop:", dropNode.label, dropType);
};
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === "Level two 3-1") {
    return type !== "inner";
  } else {
    return true;
  }
};
const allowDrag = (draggingNode: Node) => {
  console.log("draggingNode :>> ", draggingNode.data.fixed);
  return draggingNode.data.fixed ? false : true;
};

defineExpose({
  open,
});
</script>

<style lang="scss">
.el-tree-node__content {
  height: 40px;
  width: 500px;
}
.columnItem {
  cursor: move;
  width: 100%;
}
</style>
